<template>
  <div class="login-wrap">
    <div class="title">
      <span>huahui.com</span>
      <span> 花卉网</span>
    </div>
    <div class="login-box">
      <el-tabs v-model="activeName" :stretch="true" @tab-click="handleClick">
        <el-tab-pane label="账号登陆" name="login">
          <el-form ref="loginFormRef" label-width="0px" class="ms-content" :model="loginForm" :rules="loginFormRules">
            <el-form-item prop="userName">
              <el-input v-model="loginForm.userName" placeholder="请输入账号" @keyup.enter.native="login()">
                <el-button slot="prepend" icon="iconfont icon-yonghu">账号</el-button>
              </el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input v-model="loginForm.password" placeholder="请输入密码" type="password" @keyup.enter.native="login()">
                <el-button slot="prepend" icon="iconfont icon-mima">密码</el-button>
              </el-input>
            </el-form-item>
            <el-form-item v-if="isRegister" prop="surePassword">
              <el-input v-model="loginForm.surePassword" placeholder="请再输入密码" type="password" @keyup.enter.native="login()">
                <el-button slot="prepend" icon="iconfont icon-mima">确认密码</el-button>
              </el-input>
            </el-form-item>
            <!-- <el-form-item v-if="isRegister" prop="surePassword">
              <el-input v-model="loginForm.surePassword" placeholder="请输入昵称" type="password" @keyup.enter.native="login()">
                <el-button slot="prepend" icon="iconfont icon-mima">昵称</el-button>
              </el-input>
            </el-form-item> -->
            <div class="login-btn">
              <el-button type="primary" @click="login()">登录/注册</el-button>
            </div>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="游客登陆" name="touristLanding">
          <el-form label-width="0px" class="ms-content">
            <span style="color:#bac0c4;font-size:15px">游客登陆将缺少正常用户的某些权限</span>
            <div class="login-btn" style="margin-top:15px">
              <el-button type="primary" @click="login()">登录</el-button>
            </div>
          </el-form>

        </el-tab-pane>
      </el-tabs>

    </div>

  </div>

</template>

<script>
// import moment from 'moment'
// 导入处理时间的类库

export default {
  name: 'Login',
  data() {
    return {
      isRegister: false, // 是否注册
      activeName: 'login', // 切换tab
      // 这是登录表单的数据绑定对象
      loginForm: {
        userName: 'admin',
        password: '',
        surePassword: ''
      },
      // 这是表单的验证规则对象
      loginFormRules: {
        // 验证用户名是否合法
        userName: [
          { required: true, message: '请输入账号', trigger: 'blur' },
          {
            min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'
          }
        ],
        // 验证密码是否合法
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          {
            min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur'
          }
        ],
        // 验证再次输入密码是否合法
        surePassword: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          {
            min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur'
          }
        ]
      }
    }
  },
  mounted() {
  },
  methods: {
    // 点击切换游客还是登陆
    handleClick() {
      this.isRegister = false
    },
    // 登录
    login() {
      if (this.activeName === 'touristLanding') {
        this.$router.push({ // 核心语句
          path: '/home' // 跳转的路径
        // query:{           //路由传参时push和query搭配使用 ，作用时传递参数
        //   id:this.id ,
        // }
        })
        return
      }
      const that = this
      // 对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，
      // 并传入两个参数：是否校验成功和未通过校验的字段。
      // 若不传入回调函数，则会返回一个 promise
      // 不是注册才进行
      if (!this.isRegister) {
        that.$refs.loginFormRef.validate((valid) => {
        // 如果valid为true,说明用户名跟密码符合规则,可以登录
          if (valid) {
            that.$api.login.login(this.loginForm)
              .then(res => {
                // 1.将登录成功之后的 token,保存到客户端的 sessionStorage 中
                // 1.1 项目中除了登录之外的其他API接口,必须在登录之后才能访问
                if (res.data.message == 'success') {
                // 1.3 设置token 时间为2小时有效
                  // const token_time = moment().add(2, 'h').format('h:mm')
                  that.$message.success('登录成功')
                  // 1.2 token 只应在当前网站打开期间生效,所以将 token 保存在 sessionStorage 中
                  // window.sessionStorage.setItem("token",token);
                  // window.sessionStorage.setItem('token', res)
                  // 把用户名也存入sessionStorage中
                  // window.sessionStorage.setItem('username', that.loginForm.userName)
                  // window.sessionStorage.setItem('token_time', token_time)
                  // 2.通过编程时导航栏跳到后台主页，路由地址是/home
                  // this.$router.push('/home');
                  window.localStorage.setItem('userInfo', JSON.stringify(res.data.content))
                  that.$router.push('/home')
                }
                if (res.data.message == '密码错误') {
                  this.$message.error('密码错误')
                }
                if (res.data.message == '用户未注册') {
                  this.$alert('跳转注册', '账号不存在', {
                    confirmButtonText: '确定',
                    callback: action => {
                      this.isRegister = true
                    }
                  })
                }
              })
          } else {
            this.$message.error('请输入账号和密码')
            return false
          }
        })
      } else {
        if (this.loginForm.password !== this.loginForm.surePassword) {
          this.$message.error('两次密码不一致')
          return
        }
        that.$api.login.register(this.loginForm)
          .then(res => {
            if (res.data.success) {
              this.$message.success('注册成功，请重新登陆')
              this.isRegister = false
            }
          })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
  .iconfont {
    color: rgb(150, 155, 159);
  }
  .login-wrap {
    width: 100%;
    height: 100%;
    background-image: url(../../assets/img/login-bg.png);
    background-size: 100% auto;
    background-position: left center;
    background-repeat: no-repeat;
    margin: 0 auto;
    // min-width: 1800px;
  }
  .title{
      position: relative;
      top: 100px;
      left: 100px;
      color: rgb(253, 104, 74);
      font-size: 35px;
  }
  .login-box{
    position: absolute;
    padding-top: 10px;
    left: 70%;
    top: 50%;
    width: 350px;
    transform: translate(-50%,-50%);
    border-radius: 5px;
    background: #ffffff;
    overflow: hidden;
    ::v-deep .el-tabs__nav{
      width: 100%;
      display: flex;
      justify-content: space-around;
      .is-active{
          color: #fd684a !important;
      }
      .el-tabs__active-bar{
          width: 175px !important;
          background-color: #fd684a;
      }
    }
    .ms-title {
      width: 100%;
      line-height: 50px;
      text-align: center;
      font-size: 20px;
      color: #fff;
      border-bottom: 1px solid #fff;
    }
    .ms-content {
      padding: 30px 30px;
    }
    .login-btn {
      text-align: center;
    }
    .login-btn button {
      width: 100%;
      height: 36px;
      margin-bottom: 10px;
    }
  }
  .el-button--primary{
      background-color: #fd684a;
      border: none;
  }
</style>
